<template>
  <div class="whiteback">
    <ylheader :leftsvg="true" :title="msgtitle"  ></ylheader>
    <div>
      <ul class="titlearray_ul">
        <li v-for="(items,index) in titlearray" :key="index" @click="selectnavigation(index)" ><div :class="{active:index==ylmessageselected}">{{items}}</div></li>
      </ul>
     <p style="height:0.1rem;background:#f5f5f5;margin:0"></p>
    </div>
    <div class="loadmore-container" ref="ylmessageWrapper">
      <div class="loadmore-ul">
        <ul v-if="msgData.length > 0">
          <li class="message-style bb1" v-for="(item,index) in msgData" :key="index">
            <!--评论内容非空-->
            <div v-if="item.content != null">
              <!--未删除审核通过-->
              <div @click.stop="turnToDetail(item.id,item.content,item.type,index)" v-if="0 == item.content.deleteFlag&&item.rec_content==null">
                <span v-if="'话题' == item.type" class="span-msg span-topic">{{item.type}}</span>
                <span v-if="'说说' == item.type" class="span-msg span-say">{{item.type}}</span>
                <span v-if="'置换' == item.type" class="span-msg span-replace">闲置</span>
                <div v-if="0 ==  item.isRead" class="myMessage-tip" />
                 <div class="pendant-wrap">
                  <div class="pendant-container">
                    <img class="img-msg" :src="item.headImg" alt="">
                    <img :src="item.pendantPicUrl"  class="pendant" v-if="item.pendantType!=0&&item.pendantPicUrl">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-shengdan@2x.png"  class="pendant" v-else-if="item.pendantType==1">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuandan@2x.png"  class="pendant" v-else-if="item.pendantType==2">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-chunjie@2x.png"  class="pendant" v-else-if="item.pendantType==3">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuanxiao@2x.png"  class="pendant" v-else-if="item.pendantType==4">
                    <img src="~img/vip.png"  class="vipimg v-h"  v-else-if="item.userType==2">
                    <img src="~img/daren.png"  class="vipimg v-h" v-else-if="item.isTalent==1">
                    </div>
                </div>
                <span class="detail-span">{{item.nickName}}</span>
                <img v-if="0 == item.rec_type" src="~img/u107.png" alt="" class="thumb_img">
                <span v-if="1 == item.rec_type && null == item.rec_pic" class="containt-span"  v-html="item.rec_content">{{item.rec_content}}</span>
                <img v-if="1 == item.rec_type && null != item.rec_pic" :src="item.rec_pic" alt="" class="thumb_img">
                <span class="time-span">{{item.intervalTime}}</span>
                <img v-if="item.content.pictureUrl != null" class="content-img" :src="item.content.pictureUrl" alt="">
                <span v-if="item.content.pictureUrl == null" class="content-img">{{item.content.content}}</span>
              </div>

              <!--未删除审核通过未通过-->
              <div  @click.stop="turnToDetail(item.id,item.content,item.type,index)" v-else-if="0 == item.content.deleteFlag&&item.rec_content!=null&&item.rec_content.indexOf('删除审核不通过原因为')<0">
                <span v-if="'话题' == item.type" class="span-msg span-topic">{{item.type}}</span>
                <span v-if="'说说' == item.type" class="span-msg span-say">{{item.type}}</span>
                <span v-if="'置换' == item.type" class="span-msg span-replace">闲置</span>
                <div v-if="0 ==  item.isRead" class="myMessage-tip" />
                <div class="pendant-wrap">
                  <div class="pendant-container">
                    <img class="img-msg" :src="item.headImg" alt="">
                    <img :src="item.pendantPicUrl"  class="pendant" v-if="item.pendantType!=0!=0&&item.pendantPicUrl">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-shengdan@2x.png"  class="pendant" v-else-if="item.pendantType==1">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuandan@2x.png"  class="pendant" v-else-if="item.pendantType==2">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-chunjie@2x.png"  class="pendant" v-else-if="item.pendantType==3">
                    <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuanxiao@2x.png"  class="pendant" v-else-if="item.pendantType==4">
                    <img src="~img/vip.png"  class="vipimg v-h"  v-else-if="item.userType==2">
                    <img src="~img/daren.png"  class="vipimg v-h" v-else-if="item.isTalent==1">
                  </div>
                </div>
                <span class="detail-span">{{item.nickName}}</span>
                <img v-if="0 == item.rec_type" src="~img/u107.png" alt="" class="thumb_img">
                <span v-if="1 == item.rec_type && null == item.rec_pic" class="containt-span" v-html="item.rec_content">{{item.rec_content}}</span>
                <img v-if="1 == item.rec_type && null != item.rec_pic" :src="item.rec_pic" alt="" class="thumb_img">
                <span class="time-span">{{item.intervalTime}}</span>
                <img v-if="item.content.pictureUrl != null" class="content-img" :src="item.content.pictureUrl" alt="">
                <span v-if="item.content.pictureUrl == null" class="content-img">{{item.content.content}}</span>
              </div>

              <!--已删除内容-->
              <div @click="toastAlert(item,index)" v-else>
                <span v-if="'话题' == item.type" class="span-msg span-topic">{{item.type}}</span>
                <span v-if="'说说' == item.type" class="span-msg span-say">{{item.type}}</span>
                <span v-if="'置换' == item.type" class="span-msg span-replace">闲置</span>
                <div v-if="0 ==  item.isRead" class="myMessage-tip" />
                <span class="delete-containt">{{item.rec_content}}</span>
                <span style="margin-left:1rem;">{{item.time}}</span>
                <img v-if="item.content.pictureUrl != null" class="content-img" :src="item.content.pictureUrl">
                <span v-if="item.content.pictureUrl == null" class="content-img">{{item.content.content}}</span>
              </div>
            </div>
            <!--评论内容为空-->
            <div @click.stop="turnToDetail(item.id,'',item.type,index)" v-if="item.content == null">
              <span v-if="'话题' == item.type" class="span-msg span-topic">{{item.type}}</span>
              <span v-if="'说说' == item.type" class="span-msg span-say">{{item.type}}</span>
              <span v-if="'置换' == item.type" class="span-msg span-replace">{{item.type}}</span>
              <div v-if="0 ==  item.isRead" class="myMessage-tip" />
              <div class="pendant-wrap">
                <div class="pendant-container">
                  <img class="img-msg" :src="item.headImg" alt="">
                  <img :src="item.pendantPicUrl"  class="pendant" v-if="item.pendantType!=0&&item.pendantPicUrl">
                  <img src="https://youlingqinius.wonderlandnet.cn/youlin-shengdan@2x.png"  class="pendant" v-else-if="item.pendantType==1">
                  <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuandan@2x.png"  class="pendant" v-else-if="item.pendantType==2">
                  <img src="https://youlingqinius.wonderlandnet.cn/youlin-chunjie@2x.png"  class="pendant" v-else-if="item.pendantType==3">
                  <img src="https://youlingqinius.wonderlandnet.cn/youlin-yuanxiao@2x.png"  class="pendant" v-else-if="item.pendantType==4">
                  <img src="~img/vip.png"  class="vipimg v-h"  v-else-if="item.userType==2">
                  <img src="~img/daren.png"  class="vipimg v-h" v-else-if="item.isTalent==1">
                </div>
              </div>
              <span class="detail-span">{{item.nickName}}</span>
              <img v-if="0 == item.rec_type" src="~img/u107.png" alt="" class="thumb_img">
              <span v-if="1 == item.rec_type" class="containt-span"  v-html="item.rec_content">{{item.rec_content}}</span>
              <span class="time-span">{{item.intervalTime}}</span>
              <div class="shuoshuo-new">
                <span class="yl-2kong nosvg">
                  <span class="path1">
                    <span class="path2">
                      <span class="path3">
                        <span class="path4">
                          <span class="path5">
                            <span class="path6">
                              <span class="path7">
                                <span class="path8">
                                  <span class="path9"></span>
                                </span>
                              </span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
                <span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
              </div>
            </div>
          </li>
        </ul>
        <div v-if="ismsgempty == true">
          <div class="shuoshuo-new">
            <span class="yl-2kong nosvg">
              <span class="path1">
                <span class="path2">
                  <span class="path3">
                    <span class="path4">
                      <span class="path5">
                        <span class="path6">
                          <span class="path7">
                            <span class="path8">
                              <span class="path9"></span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
            <span class="no-text">还没有收到消息，快去跟大家互动吧！</span>
          </div>
        </div>
      </div>
    </div>
     <!--标为已读--> 
     <div class="allread_container" @click="allread()">
       <div>
          <span>标为</span>
          <span>已读</span>
       </div>
     </div>
  </div>
</template>
<script>
import { Popup, Cell, Loadmore, Toast, Indicator } from "mint-ui";
import ylheader from "src/components/yl-header.vue";
import api from "src/api/index";
import Vue from 'vue'
import { mapState, mapMutations } from "vuex";
export default {
  name: "ylMessage",
  data() {
    return {
      titlearray: ["全部","话题", "说说", "闲置"],
      msgType:0,
      page: 1,
      totalPage: 0,
      msgData: [],
      ismsgempty: false,
      is_r: false,
      msgtitle:"",
    };
  },
  beforeRouteLeave (to, from, next) {
      if(to.path=="/message"){
       this.changeylmessageselected(0);
      };
      next()
  },
  computed: {
    ...mapState(["ylmessageselected","notreadmsg"])
  },
  mounted() {
    if(this.$route.query.tag==1){
      this.msgtitle="赞";
    }else if(this.$route.query.tag==2){
      this.msgtitle="评论";
    }
    Indicator.open("加载中...");
    this.getMessageData().then(data => {
      return this.initScroll();
    });
  },
  methods: {
     ...mapMutations(["changeylmessageselected","changenotreadmsg"]),
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let ylmessageWrapper = this.$refs.ylmessageWrapper;
          let _this = this;
          _this.myscroll = new iScroll(ylmessageWrapper, {
            //上拉时触发
            onScrollMove: function() {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                //加载数据
                setTimeout(() => {
                  if (_this.page < _this.totalPage) {
                    _this.page += 1;
                    _this.getMessageData();
                  }
                }, 0);
              }
            },
            //上拉之后如果触发刷新则 状态图标值为1 显示loading状态
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (localStorage.tempPageHeight != document.getElementsByClassName("loadmore-ul")[0].scrollHeight) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("下啦 ...");
        });
        resolve("初始化scroll ...");
      });
      Indicator.close();
      return p;
    },
    getMessageData() {
      let p = new Promise((resolve, reject) => {
        if(this.$route.query.tag==1){
          this.msgType=this.ylmessageselected+4;
        }else if(this.$route.query.tag==2){
          this.msgType=this.ylmessageselected+8;
        }
        const params={clazz:this.msgType,page:this.page,limit:10};
        api.getMyMessage(params).then(res => {
          if (res.success) {
            this.msgData = this.is_r
                 ? [...this.msgData, ...res.data.list]
                 : res.data.list;
            if (this.msgData.length == 0) {
              this.ismsgempty = true
            } else {
              this.ismsgempty = false
            }
            this.totalPage = res.data.totalPage;
            if(this.page<res.data.totalPage){
                this.is_r=false;
            }
            this.$util.getListUrl(this.msgData)
            if(this.myscroll){
                this.$nextTick(() => {
                  setTimeout(() => {
                    this.myscroll.refresh();
                  })
                });
            } 
          }
          resolve("获取我的消息数据...");
        });
      });
      return p;
    },
    turnToDetail(id,content, type,index) {
      if (!content.goId || !content.id) return;
      this.godetailupdatanotread();//更新未读消息数
      this.updateread(id);
      if ("话题" == type) {
        this.$router.push({
          path: "/commentsdetail",
          query: {
            type: "0",
            commentId: content.goId,
            myJoin: 1,
            topicId: content.sourceId
          }
        });
      } else if ("说说" == type) {
        this.$router.push({
          path: "/shuodetail",
          query: {
            saysId: content.goId,shuoshuoIndex:index
          }
        });
      } else if ("置换" == type) {
        this.$router.push({
          path: "/replacedetail",
          query: {
            replacedId: content.goId,replaceIndex:index
          }
        });
      }
    },
    //更新消息阅读状态
    updateread(id) {
      api.Updateread({id:id}).then(res => { if (res.success) {}});
    },
    //选择话题、说说、闲置
    selectnavigation(index) {
      this.page = 1;
      this.changeylmessageselected(index);
      this.is_r=false;
      this.getMessageData();
      this.myscroll.scrollTo(0,0);
    },
    toastAlert(item,index) {
      Toast("此条内容已删除");
      this.updateread(item.id);
      this.updataindexdata(item,index);
    },
    allread(){
      if(this.$route.query.tag==1){
        api.likeisread().then(res=>{
          if(res.success){
              this.updatadata();
              this.updatanotreadnum();
          }
        })
      }else if(this.$route.query.tag==2){
        api.commentisread().then(res=>{
          if(res.success){
              this.updatadata();
              this.updatanotreadnum();
          }
        })
      }
    },
    updatadata(){
      _each(this.msgData,(v,i)=>{
        if(v.isRead==0){
          v.isRead=1;
          Vue.set(this.msgData,i,this.msgData[i]);
        }
      })
    },
      //更新某条未读记录
    updataindexdata(item,index){
      if(item.isRead==0){
        item.isRead=1;
        Vue.set(this.msgData,index,this.msgData[index]);
      }
    },

    updatanotreadnum(){//标为已读更新消息未读数
      if(this.$route.query.tag==1){
         const numobj = { notReadLike:0, notReadComment: this.notreadmsg.notReadComment,
                              notreadleavemsg:this.notreadmsg.notreadleavemsg,notreadrec:this.notreadmsg.notreadrec,notReadSysMsg:this.notreadmsg.notReadSysMsg};
        this.changenotreadmsg(numobj); 
      }else if(this.$route.query.tag==2){
         const numobj = { notReadLike:this.notreadmsg.notReadLike, notReadComment: 0,
                              notreadleavemsg:this.notreadmsg.notreadleavemsg,notreadrec:this.notreadmsg.notreadrec,notReadSysMsg:this.notreadmsg.notReadSysMsg};
        this.changenotreadmsg(numobj); 
      }
    },
    godetailupdatanotread(){
      if(this.$route.query.tag==1){
         const numobj = { notReadLike:this.notreadmsg.notReadLike-1, notReadComment: this.notreadmsg.notReadComment,
                              notreadleavemsg:this.notreadmsg.notreadleavemsg,notreadrec:this.notreadmsg.notreadrec,notReadSysMsg:this.notreadmsg.notReadSysMsg};
        this.changenotreadmsg(numobj); 
      }else if(this.$route.query.tag==2){
         const numobj = { notReadLike:this.notreadmsg.notReadLike, notReadComment: this.notreadmsg.notReadComment-1,
                              notreadleavemsg:this.notreadmsg.notreadleavemsg,notreadrec:this.notreadmsg.notreadrec,notReadSysMsg:this.notreadmsg.notReadSysMsg};
        this.changenotreadmsg(numobj); 
      }
    }
  },
  components: {
    ylheader,
  },
  destroyed() {
    if (this.myscroll) {
      this.myscroll.destroy;
      this.myscroll = null;
    }
  }
};
//, ylloadMore
</script>

<style lang="less">
.allread_container{
  width: 1.23rem;
  height: 1.23rem;
  position: fixed;
  bottom: 0.45rem;;
  right: 0.3rem;
  background: url("../../assets/yidu.png") no-repeat center center;
  background-size: 100% 100%;
  text-align: center;
  div{
    margin-top: 0.2rem;
    span{
      display: block;
      font-size: 0.24rem;
      color: #ffffff;
    }
  }
}
</style>


<style lang="less" scoped>

.img-msg {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // margin-left: 0.9rem;
}

.detail-span {
  position: absolute;
  line-height: 0.4rem;
  font-family: "PingFangSC Medium";
  font-size: 0.26rem;
  margin-left: 1.85rem;
  color: #666666;
  width: 3.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

.containt-span {
  position: absolute;
  width: 3.5rem;
  max-width: calc(~"100vw-320px");
  margin-top: 0.4rem;
  margin-left: 1.85rem;
  line-height: 0.4rem;
  font-family: "PingFangSC Regular";
  font-size: 0.28rem;
  color: #494949;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.time-span {
  position: absolute;
  margin-top: 0.8rem;
  margin-left: 0.2rem;
  font-size: 0.22rem;
  color: #999999;
  font-family: "PingFangSC Regular";
}

.content-img {
  display: -webkit-box;
  width: 1.3rem;
  max-height: 1rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.26rem;
  color: #494949;
  line-height: 0.4rem
}

.span-topic {
  background-color: #f6b766;
}


.span-say {
  background-color: #3fa7fb;
}

.span-replace {
  background-color: #fb685b;
}

.myMessage-tip {
  position: absolute;
  height: 0.18rem;
  width: 0.18rem;
  border-radius: 50%;
  background-color: #f00;
  left: 0.6rem;
  top: 0.15rem;
}

.typeImage-style {
  position: absolute;
  right: 0;
  margin-top: 0.1rem;
  margin-right: 0.3rem;
  display: none;
}

.thumb_img {
  position: absolute;
  height: 0.32rem;
  width: 0.32rem;
  margin-top: 0.45rem;
  margin-left: 1.85rem;
}

.delete-containt {
  display: -webkit-box;
  height: 0.7rem;
  margin-top: 0.2rem;
  margin-left: 1rem;
  color: #999;
  width: 4.5rem;
  font-family: "PingFangSC Regular";
  font-size: 0.26rem;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}

.no-text {
  margin-top: 0;
}

.zhezhao {
  position: fixed;
  left: 0;
  top: 0.88rem;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  z-index: 200
}

.nodata {
  display: none
}
.titlearray_ul{
  display: flex;
  align-items: center;
  height: 0.9rem;
}
.titlearray_ul li{
  display: flex;
  justify-content: center;
  flex: 1;
  height: 100%;
  align-items: center;
  font-size: 0.32rem;
  color:#494949;
}
.active{
  color: #fb685b;
  border-bottom: 2px solid #fb685b;
  width: 1rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
// .v-h{
//   top:0.6rem;
//   left: 1.45rem;
// }
  // .pendant{
  //   height: 1rem;
  //   position: absolute;
  //   left: 0.75rem;
  //   bottom:0.3rem;
  // }
    .pendant{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pendant-container{
      width: 1rem;
      position: relative;
      height:1rem;
      margin-top: -0.1rem;
    }
    .pendant-wrap{
      position: absolute;
      margin-left: 0.85rem;
    }
</style>
